<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="ie-comp|webkit|ie-stand">
    <link rel="stylesheet" href="assets/stylesheets/index.css">
    <link rel="stylesheet" href="assets/stylesheets/comm.css">
    <link rel="stylesheet" href="assets/stylesheets/foot.css">
</head>
<body>
<!-- 顶部导航 -->

<!-- banner -->
<div class="banner">
    <div>
        <a id="a1" class="a1 active"></a>
        <a id="a2" class="a2"></a>
        <a id="a3" class="a3"></a>
    </div>
    <div class="index_header">
        <img src="assets/images/index/white_logo.png" class="logo"/>
        <ul class="index_ul">
            <li><a href="about_bianmingka/about_convenience_card.html">关于便民卡</a></li>
            <li><a href="#">服务指南</a></li>
            <li><a>公众号</a></li>
            <li><a>应用下载</a></li>
            <li><a href="business_login.html">商户中心</a></li>
            <li><a href="login.html">个人中心</a></li>
        </ul>
    </div>
    <a style="left: 80px;" class="left"></a>
    <a style="right: 80px;" class="right"></a>
</div>
<div class="index_body">
    <!-- 公告 -->
    <div class="gray_color small_fontsize notice_div body">
        <img src="assets/images/index/2.png"/>
        <marquee onMouseOver="this.stop()" onMouseOut="this.start()" style="width: 800px;">
            <a>8月9号，甘肃日报社党委数据、社长
                甘肃日报报业集团董事长王光庆来嘉，深入我市丝绸之路文化博览园、五大项目现场了解我市项目建设进展情况。</a>
            <a>新闻2</a>
            <a>新闻3</a>
        </marquee>
    </div>
    <!--生活缴费-->
    <div class="title_div title_large_fontsize">生活缴费</div>
    <div class="life_money body align_center">
        <a class="water_div not_a" href="personal/water/water_index.html">
            <div class="img_div">
                <img src="assets/images/index/water.png"/>
            </div>
            <div class="hover_div">
                <img src="assets/images/index/6.png" class="jiantou"/>
            </div>
            <div>
                <div class="large_fontsize">水费查询与缴费</div>
                <div class="gray_color">支付xxx公司,xxxx公</div>
            </div>
        </a>
        <a class="phone_div not_a">
            <div class="img_div width_small">
                <img src="assets/images/index/3.png"/>
            </div>
            <div class="hover_div">
                <img src="assets/images/index/6.png" class="jiantou"/>
            </div>
            <div>
                <div class="large_fontsize">电费查询与缴纳</div>
                <div class="gray_color">支付xxx公司,xxxx公司及</div>
            </div>
        </a>
        <a class="gas_div not_a" href="personal/gas/gas_index.html">
            <div class="img_div width_small">
                <img src="assets/images/index/gas.png"/>
            </div>
            <div class="hover_div">
                <img src="assets/images/index/6.png" class="jiantou"/>
            </div>
            <div>
                <div class="large_fontsize">燃气费查询与缴纳</div>
                <div class="gray_color">支付xxx公司,xxxx公司及</div>
            </div>
        </a>
    </div>
    <div class="life_money margin_top_middle body align_center">
        <a class="phone_div not_a" href="personal/recharge_phone.html">
            <div class="img_div height_small">
                <img src="assets/images/index/phone.png"/>
            </div>
            <div class="hover_div">
                <img src="assets/images/index/6.png" class="jiantou"/>
            </div>
            <div>
                <div class="large_fontsize">电话费缴纳</div>
                <div class="gray_color">支付xxx公司,</div>
            </div>

        </a>
        <a class="car_div not_a">
            <div class="img_div height_small">
                <img src="assets/images/index/car.png"/>
            </div>
            <div class="hover_div">
                <img src="assets/images/index/6.png" class="jiantou"/>
            </div>
            <div>
                <div class="large_fontsize">违章罚款缴纳</div>
                <div class="gray_color">支付xxx公司,xxxx公司及xxxx</div>
            </div>
        </a>
        <a class="water_div not_a">
            <div class="img_div height_small">
                <img src="assets/images/index/4.png"/>
            </div>
            <div class="hover_div">
                <img src="assets/images/index/6.png" class="jiantou"/>
            </div>
            <div>
                <div class="large_fontsize">供暖费查询与缴费</div>
                <div class="gray_color">支付xxx公司,xxxx公司及xxxx公司</div>
            </div>
        </a>
    </div>
    <!--交通出行-->
    <div class="white_color transport_div margin_top_large ">
        <div class="body small_fontsize align_center animate_active">
            <div class="title_large_fontsize align_left">交通出行</div>
            <div class="margin_top_large align_left">雄关便民卡工程实现了公共出行的"一卡通"和"一机通"服务内容涵盖了公交乘车，公共自行车，出租车和机动车停车领域。</div>
            <div class="margin_top_middle align_left">"一卡通"是指市民可持雄关便民卡刷卡乘坐所有线路的公交卡、刷卡租还公共自行车、刷卡缴纳停车费。</div>
            <div class="margin_top_middle align_left">
                "一机通"是指市民卡可持手机凭雄关APP扫码乘坐所有线路公交车、扫码租还公共自行车、扫码乘坐出租车以及扫码支付停车费。同时可通过APP查询到公共出行领域的便民信息。
            </div>
            <a class="btn">
                <div>开通公共自行车应用</div>
            </a>
        </div>
    </div>
    <!--公共服务-->
    <div class="public_service margin_top_large ">
        <div class="title_div title_large_fontsize ">公共服务</div>
        <div class="animate_active1" style="max-width: 1350px;margin: 0 auto;width: 100%">
            <a><img src="assets/images/index/8.png" class="left_prev"/></a>
            <a><img src="assets/images/index/9.png" class="right_next"/></a>
            <div class="body white_color large_fontsize" id="pic_div">
                <ul class="pic_ul">
                    <li>
                        <a>
                            <img src="assets/images/index/7.png"/>
                            <div>居家养老</div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="assets/images/index/7-1.png"/>
                            <div>社保查询</div>
                        </a>
                    </li>
                    <li class="active">
                        <a>
                            <img src="assets/images/index/7-2.png"/>
                            <div>公积金查询</div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="assets/images/index/7-3.png"/>
                            <div>个人征信</div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="assets/images/index/7-4.png"/>
                            <div>图书馆</div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="assets/images/index/7-5.png"/>
                            <div>户籍查询</div>
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="assets/images/index/7-6.png"/>
                            <div>房产登记查询</div>
                        </a>
                    </li>
                    <li>
                        <a class="last">
                            <img src="assets/images/index/7-7.png"/>
                            <div>机动车查询</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--休闲旅游-->
    <div class="title_div title_large_fontsize ">休闲旅游</div>
    <div class="body travle_div animate_active2">
        <a class="travle_a">
            <div>
                <img src="assets/images/index/travle.png"/>
            </div>
            <div>
                <p class="large_fontsize margin_top_middlel old_color">旅游年卡</p>
                <p class="margin_top_middle gray_color">办理旅游年卡，优惠多多，本地多处热门景点凭此卡可享受品质服务。</p>
            </div>
        </a>
        <a class="spot_a">
            <div>
                <img src="assets/images/index/spot.png"/>
            </div>
            <div>
                <p class="large_fontsize margin_top_middlel old_color">景区介绍</p>
                <p class="margin_top_middle gray_color">万里雄关，长城西端起点，古代丝绸之路的交通要冲，带您领路西北风情。</p>
            </div>
        </a>

        <a class="food_a">
            <div>
                <img src="assets/images/index/food.png"/>
            </div>
            <div>
                <p class="large_fontsize old_color margin_top_middlel">特色美食</p>
                <p class="margin_top_middle gray_color">浓浓的西北风情，当地的特色美食，让人流连忘返。</p>
            </div>
        </a>
        <a class="face_a last">
            <div>
                <img src="assets/images/index/face.png"/>
            </div>
            <div>
                <p class="large_fontsize old_color margin_top_middlel">人脸采集</p>
                <p class="margin_top_middle gray_color">人脸识别为您提供最安全的保障服务，出入景区方便快捷。</p>
            </div>
        </a>
    </div>
    <!--合作商家-->
    <div class="margin_top_large buiness_div white_color ">
        <div class="title_div title_large_fontsize ">合作商家</div>
        <div class="body animate_active3">
            <ul class="large_fontsize">
                <li class="active first">
                    <a>商场超市</a>
                </li>
                <li>
                    <a>加油加气</a>
                </li>
                <li>
                    <a>酒店住宿</a>
                </li>
                <li>
                    <a>餐厅饭店</a>
                </li>
                <li class="last">
                    <a>休闲娱乐</a>
                </li>
                <div class="ul_div"></div>
            </ul>
            <div class="buiness_banner_div">
                <div>
                    <div class="buiness_banner_img first">
                        <img src="assets/images/index/11.png"/>
                        <img src="assets/images/index/12.png"/>
                        <img src="assets/images/index/13.png"/>
                    </div>
                    <div class="buiness_banner_img">
                        <img src="assets/images/index/11.png"/>
                    </div>
                    <div class="buiness_banner_img">
                        <img src="assets/images/index/12.png"/>
                    </div>
                    <div class="buiness_banner_img">
                        <img src="assets/images/index/13.png"/>
                    </div>
                    <div class="buiness_banner_img">
                        <img src="assets/images/index/11.png"/>
                        <img src="assets/images/index/13.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--金融服务-->
    <div class="finance_div margin_top_large white_color ">
        <div class="title_div title_large_fontsize">金融服务</div>
        <div class="body animate_active4">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida
                dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis
                natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra
                vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
            </div>
            <a class="btn btn_div">
                <div>了解更多</div>
            </a>
        </div>

    </div>
</div>
<!--footer-->
<div class="footer">
    <div class="foot_body">
        <div>
            <img src="assets/images/foot/wechat.png"/>
            <div class="foot_txt">微信公众号</div>
        </div>
        <div>
            <img src="assets/images/foot/app.png"/>
            <div class="foot_txt">APP应用下载</div>
        </div>
        <p>
            嘉峪关，号称“天下第一雄关”，位于甘肃省嘉峪关市西5千米处最狭窄的山谷中部，城关两侧的城墙横穿沙漠戈壁，北连黑山悬壁长城，南接天下第一墩，是明长城最西端的关口，历史上曾被称为河西咽喉，因地势险要，建筑雄伟，有连陲锁钥之称。嘉峪关是古代“丝绸之路”的交通要塞，中国长城三大奇观之一（东有山海关、中有镇北台、西有嘉峪关）。
        </p>
    </div>
    <div class="foot_body">&copy;2012-2018嘉峪关xxxxx公司甘ICP备18043664号-18</div>
</div>
<script src="assets/javascripts/jquery-1.11.1.min.js"></script>
<script src="assets/javascripts/index.js"></script>
</body>
</html>